<template>
  <!-- vue3中已经自己有id="app"无需自己编写 -->
  <!-- <div id="app"> -->
  <TheHeader />
  <MobileMenu />
  <SearchDialog />
  <router-view class="main-container" />
  <TheFooter />
 
  <div class="cursor-container" ref="cursorContainer"></div>
  <!-- </div>  -->
</template>

<script setup>
import TheHeader from '@/layout/Header/index.vue'
import TheFooter from '@/layout/Footer/index.vue'
import MobileMenu from '@/layout/MobileMenu/index.vue'
import { onMounted,onUnmounted, ref } from 'vue';
import SearchDialog from '@/components/Search/index.vue'

// 使用 ref 引用容器元素
const cursorContainer = ref(null);
let clickHandler = null;

// 初始化鼠标点击效果
const initCursorEffect = () => {
  // 获取容器元素
  const container = cursorContainer.value;
  
  // 创建点击事件处理函数
  clickHandler = (e) => {
    const cursor = document.createElement('div');
    cursor.className = 'cursor-fx';
    cursor.style.left = `${e.clientX}px`;
    cursor.style.top = `${e.clientY}px`;
    
    if (container) {
      container.appendChild(cursor);
      
      cursor.addEventListener('animationend', () => {
        cursor.remove();
      });
    }
  };
  
  // 添加全局点击事件监听
  document.addEventListener('click', clickHandler);
};

// 组件挂载后初始化
onMounted(() => { 
  initCursorEffect();
});

// 组件卸载前清理
onUnmounted(() => {
  if (clickHandler) {
    document.removeEventListener('click', clickHandler);
  }
});



</script>
<style lang="scss">
@import 'animate.css';
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

* {
  margin: 0;
  padding: 0;
  font-family: "font";
  box-sizing: border-box;
}
</style>
